<template>
  <div style="padding: 10px">
    <!-- 图表区域 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card shadow="hover" style="height: 100%;">
          <div slot="header" class="clearfix">
            <span>订单数量统计</span>
          </div>
          <div id="orderCountChart" style="width: 100%; height: 400px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover" style="height: 100%;">
          <div slot="header" class="clearfix">
            <span>总金额统计</span>
          </div>
          <div id="totalAmountChart" style="width: 100%; height: 400px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 卡片区域 -->
<!--    <el-row :gutter="20">-->
<!--      <el-col :span="8" v-for="(item, index) in tableData" :key="index" style="margin-bottom: 20px;">-->
<!--        <el-card shadow="hover" style="height: 100%;">-->
<!--          <div slot="header" class="clearfix">-->
<!--            <span>订单号: {{ item.orderId }}</span>-->
<!--            <el-button style="float: right; padding: 3px 0" type="text">详情</el-button>-->
<!--          </div>-->
<!--          <div>-->
<!--            <p><strong>顾客号:</strong> {{ item.customerId }}</p>-->
<!--            <p><strong>下单日期:</strong> {{ item.orderDate }}</p>-->
<!--            <p><strong>金额:</strong> {{ item.totalAmount }}</p>-->
<!--            <p><strong>地址:</strong> {{ item.shippingAddress }}</p>-->
<!--            <p><strong>备注:</strong> {{ item.notes }}</p>-->
<!--          </div>-->
<!--        </el-card>-->
<!--      </el-col>-->
<!--    </el-row>-->
  </div>
</template>

<script>
import request from "@/utils/request";
import * as echarts from 'echarts';

export default {
  name: 'FinancialManager',
  components: {},
  data() {
    return {
      form: {},
      dialogVisible: false,
      search: '',
      currentPage: 1,
      total: 10,
      pageSize: 10,
      tableData: [],
      orderIdQuery: '', // 新增房间名称查询条件变量
      statusOptions: [
        {label: '待处理', value: '待处理'},
        {label: '已发货', value: '已发货'},
        {label: '已完成', value: '已完成'}
      ],
      orderCountData: [],
      totalAmountData: []
    }
  },
  methods: {
    handleSizeChange() {
      this.load();
    },
    handleCurrentChange() {
      this.load();
    },
    load() {
      request.get("/trader/getOrderListPage", {
        params: {
          pageNumber: this.currentPage,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res => {
        this.tableData = res.data.list;
        this.total = res.data.total;

        // 处理订单数量统计数据
        const orderCountStats = this.getTableDataStats('status');
        this.orderCountData = Object.keys(orderCountStats).map(key => ({
          name: key,
          value: orderCountStats[key]
        }));

        // 处理总金额统计数据
        const totalAmountStats = this.getTableDataStats('totalAmount', true);
        this.totalAmountData = Object.keys(totalAmountStats).map(key => ({
          name: key,
          value: totalAmountStats[key]
        }));

        this.initCharts();
      })
    },
    getTableDataStats(field, sum = false) {
      const stats = {};
      this.tableData.forEach(item => {
        const value = item[field];
        if (sum) {
          stats[value] = (stats[value] || 0) + parseFloat(item.totalAmount);
        } else {
          stats[value] = (stats[value] || 0) + 1;
        }
      });
      return stats;
    },
    initCharts() {
      // 初始化订单数量统计图表
      const orderCountChart = echarts.init(document.getElementById('orderCountChart'));
      const orderCountOption = {
        title: {
          text: '订单数量统计'
        },
        tooltip: {},
        xAxis: {
          data: this.orderCountData.map(item => item.name)
        },
        yAxis: {},
        series: [{
          name: '数量',
          type: 'bar',
          data: this.orderCountData.map(item => item.value)
        }]
      };
      orderCountChart.setOption(orderCountOption);

      // 初始化总金额统计图表
      const totalAmountChart = echarts.init(document.getElementById('totalAmountChart'));
      const totalAmountOption = {
        title: {
          text: '总金额统计'
        },
        tooltip: {},
        xAxis: {
          data: this.totalAmountData.map(item => item.name)
        },
        yAxis: {},
        series: [{
          name: '金额',
          type: 'bar',
          data: this.totalAmountData.map(item => item.value)
        }]
      };
      totalAmountChart.setOption(totalAmountOption);
    }
  },
  created() {
    this.load();
  }
}
</script>

<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.operation-center {
  text-align: center;
}
</style>